<template>
  <div class="directory" :class="sideTheme">
    <p class="directory-title">
      <stream class="directory-icon" />
      目录
    </p>
    <n-anchor
      ref="anchorRef"
      :trigger-top="24"
      :top="88"
      style="z-index: 1"
      type='block'
      :show-background="false"
    >
      <n-anchor-link :title="item.name" :href="`#${item.id}`" v-for="(item, index) in list" :key="`item${index}`" @click="clickLink">
      </n-anchor-link>
    </n-anchor>
  </div>
</template>

<script setup name="Directory">
import anime from 'animejs';
import { Stream } from '@vicons/fa';
import { useSettingsStore } from '@/store';
import { computed, onMounted, toRefs } from 'vue';
import { useUserStore } from '@/store';
import emitter from '@/utils/mitt';
const store = useUserStore();

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);
const anchorRef = ref();

const emit = defineEmits();
const Prop = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});
const { list } = toRefs(Prop);

const scrollTop = computed(() => store.scrollTop);

const clickLink = () => {
  emit('close')
}

onMounted(() => {
});
</script>

<style lang="scss" scoped>
.directory {
  box-sizing: border-box;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
  .directory-title {
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 18px;
    color: #4c4948;
    .directory-icon {
      width: 18px;
      height: 18px;
      margin-bottom: -2px;
    }
  }
}
.action {
  background: #00c4b6;
  color: #fff !important;
}

.theme-dark {
  background: rgba(0, 0, 0, 0.5) !important;
}

::v-deep {
  .n-anchor .n-anchor-link {
    a {
      font-size: 15px;
      color: #666261 !important;
      margin: 5px 0;
      padding: 0 5px;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .n-anchor .n-anchor-link.n-anchor-link--active {
    a {
      color: #fff !important;
    }
  }
  .n-anchor.n-anchor--block .n-anchor-link.n-anchor-link--active {
    background: #00c4b6;
  }
  .theme-dark {
    & > .n-anchor .n-anchor-link {
      a {
        color: #ffffffb3 !important;
      }
    }
  }
}
</style>
